<div class="modal-header">
    <button type="button" class="close" ng-click="close()">&times;</button>
    <h4 class="modal-title"><i style="color: #ff4500" class="fa fa-link"></i>&nbsp; <b>Add {{role | capitalize}}
        Link</b></h4>
</div>

<div class="modal-body">

    <input type="text" class="input_box"
           ng-model="addExistingPartNumber.partId"
           placeHolder="Enter part number to create link" style="width: 205px;"
           typeahead-loading="loadingAddExistingData"
           uib-typeahead="result for result in getEntriesByPartNumber($viewValue)"
           typeahead-editable="true"
           typeahead-on-select="addExistingPartLink($item, $model, $label)"/>

    <img src="img/loader-mini.gif" ng-if="loadingAddExistingData">
    <br><br clear="all">

    <!--if role == child, and child does not have sequence, get the sequence information for the parent-->
    <div class="alert alert-info" ng-if="mainEntrySequence">
        The linked entry does not contain any sequence information. Select one or more of the following
        features to attach the sequence information to the linked entry.
    </div>

    <div ng-if="mainEntrySequence" style="height: 180px;  overflow: auto; border: 2px solid #A5A5A5">
        <table class="table table-hover table-condensed">
            <tr ng-repeat="feature in mainEntrySequence.features">
                <!--<td>{{feature.id}}</td>-->
                <td style="padding: 0"><img ng-src="icons/sbolv/{{feature.type.toLowerCase()}}.svg" height="55px"></td>
                <td style="vertical-align: middle">{{feature.name}}</td>
                <td style="vertical-align: middle">
                    {{feature.locations[0].genbankStart}}...{{feature.locations[0].end}}
                </td>
                <td style="vertical-align: middle">
                    <button ng-click="addSequenceToLinkAndLink(feature)" class="btn btn-primary btn-sm">Select</button>
                </td>
            </tr>
        </table>
    </div>

    <div style="display: block; margin-bottom: .2em; color: #777; padding: .75em .5em;">
        <b class="ng-binding">{{role | capitalize}} entries</b>
    </div>

    <div ng-if="!links.length">
        &nbsp; <i class="color-888 small">This entry current does not have any {{role | lowercase}} links</i>
    </div>

    <table class="table table-hover table-condensed">
        <tr ng-repeat="link in links" class="no_wrap">
            <td><b class="small color-888 ng-binding">{{link.type}}</b> {{link.partId}}</td>
            <td>{{link.name}}</td>
            <td><i class="fa fa-unlink red opacity_hover" uib-tooltip="Remove link"
                   ng-click="removeExistingPartLink(link)"></i></td>
        </tr>
    </table>
</div>

<div class="modal-footer">
    <div ng-if="!processing">
        <div class="pull-left" ng-if="errorMessage">
            <i class="fa fa-exclamation-triangle alert_color fa-fw"></i>
            <small style="font-weight: 600; color: #CC3333">{{errorMessage}}</small>
        </div>

        <button class="btn btn-default btn-sm" ng-click="close()">Close</button>
    </div>

    <div ng-if="processing" class="text-muted">
        <img src="img/loader-mini.gif"/> <i class="font-95em">Creating links...</i>
    </div>
</div>
